<template>
    <div class="black-name-box">
        <el-table
          :data="tabelData"
          border>
          <el-table-column 
            label="类型"
            width="120"
            >
            <template slot-scope="scope">
              <div v-show="scope.row.type === 1">QQ号</div>
              <div v-show="scope.row.type === 2">身份证号</div>
              <div v-show="scope.row.type === 3">手机号</div>
              <div v-show="scope.row.type === 4">趣ID</div>
              <div v-show="scope.row.type === 5">微信号</div>
            </template>
          </el-table-column>
          <el-table-column label="号码">
            <template slot-scope="scope">
              <div :class="{'table-btn': scope.row.type === 4}" @click="goUserDetail(scope.row)">{{ scope.row.number || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column 
            label="关联信息"
            width="180"
          >
            <template slot-scope="scope">
              <div v-if="scope.row.aboutInfoSaveList && scope.row.aboutInfoSaveList.length > 0">
                <!-- 如果是 选的是趣ID -->
                <div v-for="(item, index) in  scope.row.aboutInfoSaveList" :key="index">
                  <!-- <div v-if="item.values">{{ item.key }}: <span :class="{'table-btn': scope.row.type === 4}" @click="goUserDetail(scope.row)">{{ item.values.join('、') || '-'}}</span></div> -->
                  <div>
                    <span>{{ item.key }}：</span> 
                    <span :class="{'table-btn': item.key.includes('趣')}" @click="goUserDetail(it, item.key)" v-for="(it, index) in item.values" :key="index">{{ it || '-'}}、</span>
                    <span v-if="item.values && item.values.length === 0">无</span>
                  </div>
                </div>
              </div>
              <div v-else>无</div>
            </template>
          </el-table-column>
          <el-table-column label="封禁权限">
            <template slot-scope="scope">
              <div v-if="scope.row.tradeAccountBlackLimitList.length">
                <div v-for="(item, index) in scope.row.tradeAccountBlackLimitList" :key="index">
                  <span v-if="item.status">{{ item.name }}</span>
                </div>
              </div>
              <div v-else style="text-align: center;">-</div>
            </template>
          </el-table-column>
          <el-table-column label="处罚时长">
            <template slot-scope="scope">
              <div>
                <span>{{ _formatDate(scope.row.startTime) }}</span>
                 至 
                <span v-if="((scope.row.endTime - scope.row.startTime) / oneDayTime) < 100">{{ _formatDate(scope.row.endTime) }}</span>
                <span v-else>永久</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="remark" label="处罚原因"></el-table-column>
          <el-table-column label="状态">
            <template slot-scope="scope">
              <div v-show="scope.row.status === 0">
                <p>已解除</p>
                <p>{{ scope.row.statusUpdatedesc }}</p>
              </div>
              <div v-show="scope.row.status === 1" style="color: red;">处罚中</div>
              <div v-show="scope.row.status === 2">已到期</div>
            </template>
          </el-table-column>
          <el-table-column label="操作者">
            <template slot-scope="scope">
              <div>{{ scope.row.adminUserName || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
              <template slot-scope="scope">
                  <div>
                      <el-button v-if="scope.row.status === 1" type="primary" style="margin-left: 10px;margin-bottom: 10px;" @click="unsealFlag(scope)">解除</el-button>
                  </div>
              </template>
          </el-table-column>
        </el-table>
        <el-dialog
          class="dialog-box"
          title="解除处罚"
          :visible.sync="cancelChuFa"
          width="600px">
          <div class="cancel-list">
            <div class="title">封禁信息：</div>
            <div class="content" v-if="cancelMessage.length > 0">
              <div v-for="(item, idx) in cancelMessage" :key="idx">
                <span>{{ item.key }}：</span>
                <span v-for="(it, index) in item.values" :key="index">{{ it }}、</span>
              </div>
            </div>
            <div v-else>无</div>
          </div>
          <div class="cancel-list">
            <div class="title">封禁权限：</div>
            <div class="content">{{ cancelPword }}</div>
          </div>
          <div class="tip">注：解除封禁则以上信息都会被解封，请谨慎</div>
          <span slot="footer" class="dialog-footer">
              <el-button type="primary" @click="unseal">提交</el-button>
              <el-button @click="cancelChuFa = false">取 消</el-button>
          </span>
      </el-dialog>
    </div>
</template>

<script>
import { formatDate } from '@/utils/utils'

export default {
    name: 'BlackNameItem',
    data () {
        return {
          cancelId: null,
          cancelMessage: [],
          cancelPword: '',
          cancelChuFa: false,
          tabelData: [],
          oneDayTime: 3600 * 1000 * 24 * 365
        }
    },

    props: {
        userId: '',
        accountNo: ''
    },
    created() {
      this.getList()
    },
    methods: {
        _formatDate (timestamp) {
            return formatDate(timestamp, 'YYYY-MM-DD')
        },
        async getList () {
          let params = {
              userId: this.$route.query.id || this.userId,
              accountNo: this.accountNo,
              pageNum: 0,
              pageSize: 100
          }
          let res = await this.$http.get('/black/getList', {
              params
          })
          if (res.code === '0') {
              this.tabelData = res.data
              this.total = res.count
          } else {
              this.$message({
                  type: 'error',
                  message: res.desc
              })
          }
        },
        goUserDetail (item, key) {
          if ( typeof item !== 'string' && item.type !== 4) return
          if (key && !key.includes('趣')) return
          const { href } = this.$router.resolve({
              path: `/dataReport/userInfo`,
              query: {
                  id: item.number || item
              }
          })
          window.open(href, '_blank')
        },
        unsealFlag (scope) {
          let pwordArr = []
          this.cancelId = scope.row.id
          this.cancelMessage = scope.row.aboutInfoSaveList
          scope.row.tradeAccountBlackLimitList.forEach((item) => {
            pwordArr.push(item.name)
          })
          this.cancelPword = pwordArr.join('、')
          this.cancelChuFa = true
        },
        // 解封封禁
        unseal () {
          if (!this.cancelId) return
          let params = {
            id: this.cancelId,
            status: 0
          }
          this.$http.post('/black/updateTradeAccountBlackStatus', params).then((res) => {
            if (res.code === '0') {
              this.$message({
                  type: 'success',
                  message: '解除成功'
              })
              this.getList()
              this.$emit('updateInfo')
              this.cancelChuFa = false
            } else {
                this.cancelChuFa = false
                this.$message({
                    type: 'error',
                    message: res.desc
                })
            }
          })
        }
    }
}
</script>

<style lang="scss">
    .black-name-box {
      .cancel-list {
        margin-bottom: 10px;
        display: flex;
        justify-content: flex-start;
        .title {
          min-width: 80px;
          margin-right: 10px;
        }
      }
      .tip {
        color: red;
        margin-top: 20px;
      }
      .table-btn {
          cursor: pointer;
          color: #409EFF;
          font-size: 13px;
          font-weight: 500;
          &:hover {
              text-decoration: underline;
          }
      }
    }
</style>
